<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <!-- 简单步骤条 -->
      <t-card :bordered="false">
        <t-steps :defaultCurrent="1" :current="activeForm" status="process">
          <t-step-item title="链类型配置" content="链基础参数配置"></t-step-item>
          <t-step-item title="链性能配置" content="链性能相关参数配置"></t-step-item>
          <t-step-item title="自定义参数" content="其他自定义参数"></t-step-item>
          <t-step-item title="完成" content=""></t-step-item>
        </t-steps>
      </t-card>

      <!-- 分步表单1 -->
      <t-form
        v-show="activeForm === 0"
        class="step-form"
        :data="formData1"
        :rules="rules"
        labelAlign="right"
        @submit="onSubmit1"
      >
        <t-form-item label="区块链名称" name="name">
          <t-input :style="{ width: '480px' }" v-model="formData1.name" placeholder="请输入链名称"></t-input>
        </t-form-item>
        <t-form-item label="账户模式" name="auth_type">
          <t-select :style="{ width: '390px' }" v-model="formData1.auth_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in auth_type_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>

        <t-form-item label="加密算法" name="hash_type">
          <t-select :style="{ width: '390px' }" v-model="formData1.hash_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in hash_type_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="共识算法" name="consensus_type">
          <t-select :style="{ width: '390px' }" v-model="formData1.consensus_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in consensus_type_Options" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="开启gas" name="gasenable">
          <t-switch size="large" v-model="formData1.gas_enable" @change="onChange"></t-switch>
        </t-form-item>

        <t-form-item>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单2 -->
      <t-form
        v-show="activeForm === 1"
        class="step-form"
        :data="formData2"
        :rules="rules"
        labelAlign="right"
        @reset="onReset2"
        @submit="onSubmit2"
      >
        <t-divider>区块配置</t-divider>
        <t-form-item label="区块容量" name="block_tx_capacity">
          <t-input
            :style="{ width: '280px' }"
            v-model="formData2.block_tx_capacity"
            placeholder="请输入区块容量"
          ></t-input>
          <span>txs</span>
        </t-form-item>
        <t-form-item label="区块大小" name="block_size">
          <t-input :style="{ width: '280px' }" v-model="formData2.block_size" placeholder="请输入区块大小"></t-input>
          <span>MB</span>
        </t-form-item>
        <t-form-item label="出块间隔" name="block_interval">
          <t-input
            :style="{ width: '280px' }"
            v-model="formData2.block_interval"
            placeholder="请输入出块时间间隔"
          ></t-input>
          <span>ms</span>
        </t-form-item>
        <t-divider>交易池配置</t-divider>
        <t-form-item label="交易池类型" name="pool_type">
          <t-select :style="{ width: '280px' }" v-model="formData2.pool_type" class="demo-select-base" clearable>
            <t-option v-for="(item, index) in pooltypeOptions" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="交易池容量" name="max_txpool_size">
          <t-input
            :style="{ width: '280px' }"
            v-model="formData2.max_txpool_size"
            placeholder="请输入交易池容量"
          ></t-input>
          <span>txs</span>
        </t-form-item>
        <t-form-item label="批次容量" name="batch_max_size" help="适用batch交易池">
          <t-input
            :style="{ width: '280px' }"
            v-model="formData2.batch_max_size"
            placeholder="请输入批次容量"
          ></t-input>
          <span>txs</span>
        </t-form-item>
        <t-form-item label="批次间隔" name="batch_create_timeout" help="适用batch交易池">
          <t-input
            :style="{ width: '280px' }"
            v-model="formData2.batch_create_timeout"
            placeholder="请输入批次创建时间间隔"
          ></t-input>
          <span>ms</span>
        </t-form-item>

        <t-divider></t-divider>
        <t-form-item>
          <t-button type="reset" theme="default" variant="base">上一步</t-button>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单3 -->
      <div v-show="activeForm === 2" class="rule-tips">
        <t-alert theme="info" title="填写自定义配置项：" :close="true">
          <p class="span-txt">
            配置项根据yml的层级关系定义，例如，配置go最大并发数.vm.go.max_concurrency为200的配置方式如下：
          </p>
          <p class="span-txt">配置项：.vm.go.max_concurrency</p>
          <p class="span-txt">配置值：200</p>
          <t-button @click="visible = true">示例</t-button>
          <t-dialog header="配置项填写示例" :visible.sync="visible" :cancelBtn="null" :confirm-btn="null" :width="800"
            ><p class="span-txt">
              目前底层工具log.yml ,chainmaker.yml, bc1.yml三个配置文件的所有配置项修改，常见的配置有：
            </p>
            <t-divider>bc配置</t-divider>
            <p class="span-txt">.block.tx_timeout=500</p>
            <p class="span-txt">.block.block_tx_capacity=10000</p>
            <p class="span-txt">.block.block_size=50</p>
            <p class="span-txt">.block.block_interval=10</p>
            <p class="span-txt">.account_config.enable_gas=true/false</p>
            <p class="span-txt">.consensus.ext_config=[{"key": "TBFT_blocks_per_proposer", "value": "100000000"}]</p>
            <t-divider>chainmaker配置</t-divider>
            <p class="span-txt">.crypto_engine = "gmssl"</p>
            <p class="span-txt">.txpool.pool_type = "normal"</p>
            <p class="span-txt">.txpool.max_txpool_size = 2000000</p>
            <p class="span-txt">.txpool.batch_max_size = 10000</p>
            <p class="span-txt">.txpool.batch_create_timeout = 200"</p>
            <p class="span-txt">.tx_filter.type = 3</p>
            <p class="span-txt">.tx_filter.sharding.length = 10</p>
            <p class="span-txt">.monitor.enabled = true</p>
            <p class="span-txt">.pprof.enabled = true</p>
            <p class="span-txt">.storage.logdb_segment_size = 512</p>
            <p class="span-txt">.storage.rolling_window_cache_capacity = 550000</p>
            <p class="span-txt">.vm.common.max_send_msg_size = 100</p>
            <p class="span-txt">.vm.common.max_recv_msg_size = 100</p>
            <p class="span-txt">.vm.go.max_concurrency = 100</p>
            <p class="span-txt">.vm.java.max_concurrency = 100</p>
          </t-dialog>

          <div slot="message"></div>
        </t-alert>
      </div>
      <t-form
        v-show="activeForm === 2"
        class="step-form"
        :data="formData3"
        :rules="rules"
        labelAlign="left"
        @reset="onReset3"
        @submit="onSubmit3"
      >
        <div v-for="(item, index) in formData3.list" style="display: flex" :key="index">
          <t-form-item name="`list.${index}.operation`">
            <t-select
              :style="{ width: '100px' }"
              v-model="item.operation"
              class="demo-select-base"
              clearable
              placeholder="配置方式"
            >
              <t-option v-for="(item, index) in updateOptions" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item name="`list.${index}.config_file_name`">
            <t-select
              :style="{ width: '150px' }"
              v-model="item.config_file_name"
              class="demo-select-base"
              clearable
              placeholder="请选择配置文件"
            >
              <t-option v-for="(item, index) in configfileOptions" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item :name="`list.${index}.config_item`">
            <t-input :style="{ width: '500px' }" v-model="item.config_item" placeholder="请输入自定义配置项"></t-input>
          </t-form-item>
          <t-form-item :name="`list.${index}.config_value`">
            <t-input :style="{ width: '150px' }" v-model="item.config_value" placeholder="请输入配置项的值"></t-input>
            <t-button v-if="index === formData3.list.length - 1" @click="onAddFormItem">+</t-button>
            <t-button v-else @click="onDelFormItem(index)">-</t-button>
          </t-form-item>
        </div>
        <t-form-item>
          <t-button type="reset" theme="default" variant="base">上一步</t-button>
          <t-button theme="primary" type="submit">下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单4 -->
      <div class="step-form-4" v-show="activeForm === 3">
        <check-circle-filled-icon style="color: green" size="52px" />
        <!-- <p class="text">配置完成 开始构建</p>
        <p class="tips">生成指定配置的链，分发到各个节点服务器并启动</p> -->
        <div class="button-group">
          <t-space size="100px">
            <t-button @click="activeForm = 2" theme="default" variant="base">上一步</t-button>
            <t-button @click="saveForm" theme="primary">保存配置</t-button>
            <!-- <t-button @click="onReset4" theme="primary">应用到链</t-button> -->
            <!-- <t-button @click="onSubmit4" variant="base" theme="default">查看进度</t-button> -->
          </t-space>
        </div>
      </div>
    </div>
  </t-card>
</template>
<script>
import { CheckCircleFilledIcon } from 'tdesign-icons-vue';
import { prefix } from '@/config/global';
import { createChainConfig } from '@/api/requestApi';
import { auth_type_Options, hash_type_Options, consensus_type_Options } from '@/pages/performance/options.js';

const INITIAL_DATA1 = {
  name: '',
  auth_type: 1,
  hash_type: 'SM3',
  consensus_type: 4,
  gas_enable: false,
};
const INITIAL_DATA2 = {
  block_tx_capacity: null,
  block_size: null,
  block_interval: null,
  pool_type: "normal",
  max_txpool_size: null,
  batch_max_size: null,
  batch_create_timeout: null,
};
const INITIAL_DATA3 = {
  operation: 'update',
  config_file_name: '',
  config_item: '',
  config_value: '',
};

export default {
  name: 'FormStep',
  components: {
    CheckCircleFilledIcon,
  },
  data() {
    return {
      visible: false,
      checked: true,
      prefix,
      formData1: { ...INITIAL_DATA1 },
      formData2: { ...INITIAL_DATA2 },
      formData3: { list: [{ ...INITIAL_DATA3 }] },
      auth_type_Options: auth_type_Options,
      pooltypeOptions: [
        { label: 'normal', value: 'normal' },
        { label: 'batch', value: 'batch' },
        { label: 'single', value: 'single' },
      ],
      hash_type_Options: hash_type_Options,
      consensus_type_Options: consensus_type_Options,
      configfileOptions: [
        { label: 'chainmaker.yml', value: 'chainmaker.yml' },
        { label: 'bc1.yml', value: 'bc1.yml' },
        { label: 'log.yml', value: 'log.yml' },
      ],
      updateOptions: [
        { label: 'update', value: 'update' },
        { label: 'new', value: 'new' },
        { label: 'delete', value: 'delete' },
      ],
      rules: {
        name: [{ required: true, message: '请选择链名称', type: 'error' }],
        auth_type: [{ required: true, message: '请选择身份模式', type: 'error' }],
        hash_type: [{ required: true, message: '请输入加密算法', type: 'error' }],
        consensus_type: [{ required: true, message: '请输入共识算法', type: 'error' }],
        pool_type: [{ required: true, message: '请输入交易池类型', type: 'error' }],
      },
      activeForm: 0,
    };
  },
  computed: {
    amount() {
      if (this.formData1.name === '1') {
        return '565421';
      }
      if (this.formData1.name === '2') {
        return '278821';
      }
      if (this.formData1.name === '3') {
        return '109824';
      }
      return '--';
    },
  },
  methods: {
    onSubmit1({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 1;
      }
    },
    onSubmit2({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 2;
      }
    },
    onReset2() {
      this.activeForm = 0;
    },
    onSubmit3({ validateResult }) {
      if (validateResult === true) {
        this.activeForm = 3;
      }
    },
    onReset3() {
      this.activeForm = 1;
    },
    onSubmit4() {
      this.$router.replace({ path: '/detail/advanced' });
    },
    onReset4() {
      this.activeForm = 0;
    },
    onChange(val) {
      console.log(val);
    },
    onAddFormItem() {
      console.log(this.formData3);
      this.formData3.list.push({ ...INITIAL_DATA3 });
    },
    onDelFormItem(index) {
      this.formData3.list.splice(index, 1);
    },
    // 保存配置
    saveForm() {
      const params = {
        type_config: {
          chain_config_name: this.formData1.name,
          auth_type: this.formData1.auth_type,
          hash_type: this.formData1.hash_type,
          consensus_type: this.formData1.consensus_type,
          gas_enable: this.formData1.gas_enable ? 1 : 0,
        },
        performance_config: {

          block_tx_capacity: this.formData2.block_tx_capacity || 1000,
          block_size: this.formData2.block_size || 500,
          block_interval: this.formData2.block_interval || 200,
          pool_type: this.formData2.pool_type || "normal",
          max_txpool_size: this.formData2.max_txpool_size || 50000,
          batch_max_size: this.formData2.batch_max_size || 100,
          batch_create_timeout: this.formData2.batch_create_timeout || 50,
          // block_tx_capacity: this.formData2.block_tx_capacity,
          // block_size: this.formData2.block_size,
          // block_interval: this.formData2.block_interval,
          // pool_type: this.formData2.pool_type,
          // max_txpool_size: this.formData2.max_txpool_size,
          // batch_max_size: this.formData2.batch_max_size,
          // batch_create_timeout: this.formData2.batch_create_timeout,
        },
        custom_parameters: this.formData3.list,
      };
      console.log("@@@@@@@@@@@@@@");
      console.log(params);

      console.log("发送请求前");
      this.$request
        .post(createChainConfig(), params)
        .then((res) => {
          console.log("请求成功");
          console.log(res)
          console.log(res.data)
          console.log(res.status)
          if (res.status === 200) {
            this.$message.success('链配置保存成功');
            this.$router.push('/performance/chain');
          } else {
            this.$message.fail(res.data);
          }
        })
        .catch((e) => {
          console.log("请求失败", e);
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import '../index';
</style>
